<template>
	<div>
		<myfilepicker @clickFile="clickFile" :limit="limit" :value="fileList" :readonly="readonly" :imageStyles="imageStyles" :file-extname="fileExtname" :file-mediatype="fileMediatype" @select="selectFile"  @delete='deleteFile' @success="success" @fail="fail"
			:title="title"></myfilepicker>
		<!-- 上传成功提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText"  :duration="2000"></uni-popup-message>
		</uni-popup>
	</div>
</template>

<script>
	import myfilepicker from '@/components/my-file-picker.vue'
	import {getFileList,uploadFile} from '@/api/system/uploadFile.js'
	export default {
		name: 'uploadFile',
		components: {
			myfilepicker
		},
		props: {
			limit: {
				type: Number,
				default: 1
			},
			imageStyles: {
				type: Object,
				default: function(){
					return {}
				}
			},
			fileIdString: {
				type: String,
				default: ''
			},
			fileExtname: {
				type: String,
				default:''
			},
			fileMediatype: {
				type: String,
				default:'all'
			},
			title: {
				type: String,
				default:''
			},
			readonly: {
				type: Boolean,
				default:false
			},
		},
		data() {
			return {
				//文件列表
				fileList:[],
				fileIds:'',  //返回的文件id字符串
				//上传提示弹窗类别
				msgType:'success',
				messageText:'文件上传成功！'
			}
		},
		watch: {
		    fileIdString:{
		        handler(newVal,oldVal){
		            //文件列表回显
		            if(newVal!==null&&newVal!=='')
		            {
		            	let AllFileUrl=[];
		            	AllFileUrl=newVal.split(",")
		            	getFileList(AllFileUrl).then(res2=>{
		            		this.fileList= res2.data.map((item,index)=>{
		            			return {
		            				id:item.id,
		            				url: item.url,
		            				extname: item.fileType,
		            				name: item.name,
		            			}
		            		})
		            	})
		            }
		            else
		            {
		            	this.fileList=[]
		            }
		        },
		    	deep:true,
		    	immediate:true
		    }
		},
		methods: {
			//点击
			clickFile(e){
				if(e.tempFile.extname=='png'||e.tempFile.extname=='jpg'||e.tempFile.extname=='jpeg')  //预览图片
				{
					uni.previewImage({
					    current: 0, //预览图片的下标
					    urls: [e.tempFile.url] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					})
				}
				else  //pdf,png,gif,jpg,doc
				{
					uni.navigateTo({
						url: "/pages/common/fileView",
						success: (res) => {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit("dataFun", {
								data: {
									name: e.tempFile.name+'预览',
									fileSrc: e.tempFile.url,
									isFileDown: true
								},
							});
						},
					});
				}
			},
			// 获取上传状态
			selectFile(e){
				if(e.tempFilePaths.length==0)
				{
					this.msgType = 'error'
					this.messageText='选择文件失败...'
					this.$refs.message.open()
					return 
				}
				uni.showLoading({
					title: "上传中"
				});
				uploadFile(e.tempFiles).then(res=>{
					uni.hideLoading();
					if(res.code==200)
					{
						this.msgType = 'success'
						this.messageText='文件上传成功！'
						this.$refs.message.open()
						
						this.fileList.push({
							id: res.data.id,
							url: res.data.url,
							extname: res.data.fileType,
							name: res.data.name,
						})
						this.final() //向父组件传递
					}
				}).catch(error => {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: error
					})
					this.msgType = 'error'
					this.messageText='文件上传失败...'
					this.$refs.message.open()
					this.final() //向父组件传递
				})
			},
			// 上传成功
			success(e){
				this.msgType = 'success'
				this.messageText='文件上传成功！'
				this.$refs.message.open()
				
				this.final() //向父组件传递
			},
			// 上传失败
			fail(e){
				this.msgType = 'error'
				this.messageText='文件上传失败...'
				this.$refs.message.open()
				
				this.final() //向父组件传递
			},
			//删除文件
			deleteFile(e){
				this.fileList.map((item, index) => {
					if (item.name == e.tempFile.name) {
						this.fileList.splice(index, 1)
					}
				})
				this.final() //向父组件传递
			},
			final(){
				//文件
				if(this.fileList.length===0)
				{
					this.fileIds=null
				}
				else
				{
					this.fileIds=this.fileList.map(item=>item.id).join(',')
				}
				console.log('执行final方法')
				this.$emit('transFileIdString',this.fileIds)//触发transfer方法，this.user 为向父组件传递的数据
			}
		},
	}
</script>

<style scoped>

</style>